<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>员工请假</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- Import style -->
    <link
            rel="stylesheet"
            href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css"
    />
    <!-- Import Vue 3 -->
    <script src="//cdn.jsdelivr.net/npm/vue@3"></script>
    <!-- Import component library -->
    <script src="//cdn.jsdelivr.net/npm/element-plus"></script>


    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
<div id="app">

    <div>
        <h1>提交请假申请</h1>

        <el-form :model="form" label-width="120px">
            <el-form-item label="days">
                <el-input v-model="form.days" />
            </el-form-item>

            <el-form-item label="time">
                <el-col :span="11">
                    <el-date-picker
                            v-model="form.startTime"
                            type="datetime"
                            placeholder="Pick a date"
                            style="width: 100%"
                            format="YYYY-MM-DD hh:mm:ss"
                            value-format="YYYY-MM-DD hh:mm:ss"
                    />
                </el-col>
                <el-col :span="2" class="text-center">
                    <span class="text-gray-500">-</span>
                </el-col>
                <el-col :span="11">
                    <el-date-picker
                            v-model="form.endTime"
                            placeholder="Pick a time"
                            style="width: 100%"
                            type="datetime"
                            format="YYYY-MM-DD hh:mm:ss"
                            value-format="YYYY-MM-DD hh:mm:ss"
                    />
                </el-col>
            </el-form-item>
            <el-form-item label="approveUser">
                <el-input v-model="form.approveUser" type="textarea" />
            </el-form-item>


            <el-form-item label="reason">
                <el-input v-model="form.reason" type="textarea" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">Create</el-button>
                <el-button>Cancel</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div>
<!--        <el-table :data="leaveList" style="width: 1000px;border: 1px solid red" max-height="250">-->
<!--            <el-table-column prop="processId" label="processId" width="200" />-->
<!--            <el-table-column prop="days" label="days" width="120" />-->
<!--&lt;!&ndash;            <el-table-column prop="startTime" label="startTime" width="120" />&ndash;&gt;-->
<!--&lt;!&ndash;            <el-table-column prop="endTime" label="endTime" width="600" />&ndash;&gt;-->
<!--&lt;!&ndash;            <el-table-column prop="approveUser" label="approveUser" width="120" />&ndash;&gt;-->
<!--&lt;!&ndash;            <el-table-column prop="reason" label="reason" width="120" />&ndash;&gt;-->

<!--        </el-table>-->


    </div>

    <el-table :data="leaveList" stripe >
        <el-table-column prop="processId" label="processId"></el-table-column>
        <el-table-column prop="days" label="days"></el-table-column>
        <el-table-column prop="reason" label="reason"></el-table-column>
        <el-table-column prop="startTime" label="startTime"></el-table-column>
        <el-table-column prop="endTime" label="endTime"></el-table-column>
        <el-table-column prop="approveUser" label="approveUser"></el-table-column>
        <el-table-column fixed="right" label="Operations" width="120">
            <template #default="scope">
                <el-button
                        link
                        type="primary"
                        size="small"
                        @click.prevent="show(scope.row.processId)"
                >
                    查看
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <div>

        <el-input v-model="approvalForm.taskId"></el-input>
        <el-button @click="pass">通过</el-button>
    </div>

    <script>
        const {ref,createApp,reactive} = Vue
        createApp({
            setup(){
                const approvalForm = reactive({
                    approval:true
                })

                const  pass = ()=>{
                    axios.post("/approval",approvalForm).then((res)=>{
                        console.log(res,"res")
                        ElementPlus.ElMessage.success("提交成功")

                    })
                }
                const form =reactive({
                    days:"",
                    startTime:"",
                    endTime:"",
                    reason:"",
                    approveUser:""
                })

                const leaveList = ref([])

                const getLeaveList = ()=>{
                    axios.get("/unapprove").then((res)=>{
                        console.log(res,"res")
                        leaveList.value = res.data
                        console.log(leaveList.value,"leaveList")
                    })
                }

                getLeaveList()

                const onSubmit = ()=>{
                    axios.post("/ask_for_leave",form).then((res)=>{
                        console.log(res,"res")
                        ElementPlus.ElMessage.success("提交成功")

                    })
                }

                const show = (processId)=>
                    axios.get("/history/image/"+processId).then((res)=>{
                        console.log(res,"res")
                    })
                }

                return {
                    form,onSubmit,leaveList,show,pass,approvalForm
                }

            }
        }).use(ElementPlus).mount("#app")
    </script>
</div>
</body>
</html>